<html>
<head>
    <meta charset="utf-8"/>
    <title>{{ username }}</title>
    <!-- 引入Bootstrap样式文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css">
</head>
<body>

<div class="container py-5">
    <div class="mb-4">

        <div class="card">
            <div class="card-body" id="chat-log">
                {% for msg in msgs %}
                    {% if msg.image %}
                        <!-- 如果是图片消息，则显示图片 -->
                        {{ msg.username }}:<img src="http://{{ request.get_host }}/static/media/{{ msg.image.url }}"
                                                alt="{{ msg.username }}发送的图片" height="30%" width="30%" ><br>
                    {% else %}
                        <!-- 如果是文本消息，则显示文本内容 -->
                        <br>
                        {{ msg.create_time }}<br>
                        {{ msg.username }}: {{ msg.content }}<br>
                    {% endif %}
                {% endfor %}
            </div>
        </div>

    </div>

    <div class="input-group">
        <input id="chat-message-input" type="text" size="100" class="form-control">
        <input id="chat-message-submit" type="button" value="发送消息" class="btn btn-primary">
    </div>

{#    <div>#}
{#        <input id="chat-message-submit" type="button" value="发送消息" class="btn btn-primary">#}
{#    </div>#}
    <br>

    <div class="input-group">
        <input type="file" class="form-control" id="imageInput" aria-describedby="inputGroupFileAddon04"
               aria-label="Upload" accept="image/*">
        <button class="btn btn-outline-secondary" type="button" id="sendButton">发送图片</button>
    </div>


</div>

{{ room_name|json_script:"room-name" }}
<!-- 引入Bootstrap的JavaScript文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"></script>

<script>
    // 删除最后一行尾部空格和回车
    document.querySelector('#chat-log').innerHTML = document.querySelector('#chat-log').innerHTML.trim();
    // 添加上一个操作删除的回车（只删除空格，保留回车）
    // document.querySelector('#chat-log').innerHTML += '<br>';


    let username = "{{ username }}";  // 替换为实际的用户名
    let room_name = "{{ room_name }}";  // 替换为实际的房间名

    var host = "{{ request.get_host }}";
    console.log("当前域名是：" , host);
    // 创建WebSocket对象
    const chatSocket = new WebSocket(
        'ws://'
        + window.location.host
        + '/ws/chat/'
        + room_name
        + '/'
    );


    // 处理接收消息
    chatSocket.onmessage = function (e) {
        const data = JSON.parse(e.data);

        // 判断是否为图片消息
        if (data['type'] === 'image') {
            const imageFileName = data['message']; // 图片文件名
            const imageUrl = `http://${host}/static/media/${imageFileName}`; // 构建图片访问地址

            // 创建一个新的图片元素
            const imageElement = document.createElement('img');
            imageElement.src = imageUrl;

            // 将图片元素添加到图片容器中
            const imageContainer = document.getElementById('chat-log');
            imageContainer.appendChild(imageElement);

            // 添加换行
            const br = document.createElement('br');
            imageContainer.appendChild(br)
        }
        // 是否为文本消息
        else if (data['type'] === 'text') {
            const myname = "{{ username }}";
            document.querySelector('#chat-log').innerHTML += (myname + ":" + data.message + '<br>');
        }
    };

    // 处理关闭事件
    chatSocket.onclose = function (e) {
        console.error('Chat socket closed unexpectedly');
    };

    // 聚焦输入框，点击回车发送
    document.querySelector('#chat-message-input').focus();
    document.querySelector('#chat-message-input').onkeyup = function (e) {
        if (e.keyCode === 13) {  // enter, return
            document.querySelector('#chat-message-submit').click();
        }
    };

    // 发送消息给消费者
    document.querySelector('#chat-message-submit').onclick = function (e) {
        const messageInputDom = document.querySelector('#chat-message-input');
        const message = messageInputDom.value;
        chatSocket.send(JSON.stringify({
            // 发送消息和用户名
            'message': message,
            'username': username,
            'room': room_name,
            'type': 'text',
        }));
        messageInputDom.value = '';
    };

    // 当点击发送按钮的时候，处理图片发送
    document.getElementById('sendButton').addEventListener('click', function () {
        const inputElement = document.getElementById('imageInput');
        const file = inputElement.files[0];
        const reader = new FileReader();

        reader.onloadend = function () {
            // Get the Base64 encoded data
            const imageData = reader.result.split(',')[1];
            // Send the image data through WebSocket
            chatSocket.send(JSON.stringify({
                'image': imageData,
                'username': '游客',
                'room': 'lobby',
                'type': 'image',
            }));

            console.log('发送成功！');
            inputElement.value = "";
        };

        if (file) {
            reader.readAsDataURL(file);
        } else {
            console.error('Please select an image.');
        }
    });

</script>
</body>
</html>